<template>
	<view :style="{height:PhoneInfo.windowHeight + 'px',width:PhoneInfo.windowWidth + 'px'}">
		<mvBar :mysNavConfig="mysNavConfig" @onLeftClick="onLeftClick"></mvBar>
		<u-toast ref="uToast"></u-toast>
		<!-- 未处理,已处理 -->
		<view class="headerdispose">
			<view :class="dealStatus==1?'yi':'wei'" @click="dispose(1)">未处理</view>
			<view :class="dealStatus==2?'yi':'wei'" style="margin-left: 4%;" @click="dispose(2)">已处理</view>
		</view>
		<view class="tabs"><u-tabs :list="tabslist" :current='current' lineColor='#35363a' lineWidth='30'
				@click="tabsclick"></u-tabs>
		</view>
		<view class="abnormallist">
			<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="scrolltolower">
				<view class="abnormalview" v-for="(item,index) in abnormalList" :key="item.abnormalRealId">
					<view>
						<view class="zuo">
							<view class="eqname">{{item.equipmentName}}</view>
							<view class="time">{{item.collectedTime+' ('+item.pointName+')'}}</view>
						</view>
						<view class="you">
							<view class="tubiao"><u-icon name="edit-pen"
									:color="item.comment!==''&&item.comment!==null&&item.comment!==undefined?'#2979ff':'#242424'"
									@click="remark(item)" size="30"></u-icon>
							</view>
							<view class="tubiao"><u-icon name="file-text"
									:color="item.dealStatus==1?'#242424':'#2979ff'" @click="disposeinfo(item)"
									size="30"></u-icon></view>
							<view class="feaname">
								{{item.featureName}}
							</view>
						</view>
					</view>
					<view class="xia">
						<view
							:class="['xiavi',item.healthStatus=='2' ? 'yvjing' : item.healthStatus==3? 'baojing' : 'gaobao']"
							@click="record(item)">
							<view class="xianame">报警值</view>
							<view class="xiavalue">{{item.value}}{{item.featureUnit=='ma'?'%':item.featureUnit}}</view>
						</view>
						<view class="xiavi xiaview yvjing">
							<view class="xianame">一级阈值</view>
							<view class="xiavalue">{{item.unusual}}{{item.featureUnit=='ma'?'%':item.featureUnit}}
							</view>
						</view>
						<view class="xiaview xiavi baojing">
							<view class="xianame">二级阈值</view>
							<view class="xiavalue">{{item.warning}}{{item.featureUnit=='ma'?'%':item.featureUnit}}
							</view>
						</view>
						<view class="xiaview xiavi gaobao">
							<view class="xianame">三级阈值</view>
							<view class="xiavalue">{{item.highRisk}}{{item.featureUnit=='ma'?'%':item.featureUnit}}
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText"
					nomore-text=' ' bgColor="#f2f5f9"></u-loadmore>
			</scroll-view>
		</view>
		<!-- 备注 -->
		<u-popup :show="remarkshow" mode="center" @close="remarkshow=false" :closeOnClickOverlay='true' :round="10"
			:safeAreaInsetBottom='false'>
			<view class="remark">
				<view class="popuptitle">添加备注</view>
				<u--textarea v-model="remarkvalue" placeholder="请输入备注" maxlength='20' :count='true'>
				</u--textarea>
				<view class="button">
					<u-button type="primary" shape='circle'
						color="linear-gradient(to right, rgb(39, 167, 225), rgb(65, 132, 234))" text="确定"
						@click="upremark"></u-button>
				</view>
			</view>
		</u-popup>
		<!-- 报警处理 -->
		<u-popup :show="disposeshow" mode="center" @close="disposeshow=false" :closeOnClickOverlay='true' :round="10"
			:safeAreaInsetBottom='false'>
			<view class="remark">
				<view class="popuptitle">处理报警</view>
				<u--textarea v-model="disposevalue" placeholder="请输入处理详情" maxlength='50' :count='true'>
				</u--textarea>
				<view class="button">
					<u-button type="primary" shape='circle'
						color="linear-gradient(to right, rgb(39, 167, 225), rgb(65, 132, 234))" text="确定"
						@click="updispose"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				PhoneInfo: '',
				mysNavConfig: {
					/* 占位开启  */
					navPadding: true,
					/* 背景 */
					bgColor: "#2979FF",
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "报警记录",
						color: "#ffffff",
						fontSize: "18px", // px upx rpx
						fontWeight: "500", // 100 - 700
					},
					isCustomFn: true,
					btnType: "type2",
					type2Config: {
						// 左图标
						leftPath: "/static/img/back.png",
						// 右图标
						rightPath: "/static/img/home.png",
						// 圆角
						radius: "40rpx",
					}
				},
				tabslist: [{
					id: 0,
					name: '全部',
				}, {
					id: 2,
					name: '一级',
				}, {
					id: 3,
					name: '二级'
				}, {
					id: 4,
					name: '三级'
				}],
				userinfo: '',
				abnormalList: [],
				loadStatus: 'loadmore',
				loadingText: '加载中...',
				loadmoreText: '上拉加载更多',
				count: 0,
				pageIndex: 1,
				pageSize: 20,
				healthStatus: '',
				current: 0,
				remarkshow: false,
				remarkid: '',
				remarkvalue: '',
				equipmentRealId: '',
				pointRealId: '',
				dealStatus: 0, //0所有,1未处理,2已处理
				disposeshow: false,
				disposevalue: '',
				disposeid: '',
			}
		},
		onLoad(parameter) { //id等于10的时候,表示是点击报警动态跳转
			this.PhoneInfo = this.$utils.GetPhoneInfo();
			this.userinfo = uni.getStorageSync('userinfo');
			if (parameter.id == 10) {
				this.healthStatus = parameter.healid;
				this.current = Number(parameter.healid) - 1;
				this.getequipAbnormalList(parameter)
			} else {
				this.current = parameter.id;
				this.healthStatus = Number(this.current) + 1;
				this.getAbnormalList();
			}
		},
		methods: {
			//获取指定设备的报警列表
			getequipAbnormalList(value) {
				uni.showLoading({
					title: "加载中...",
					mask: true,
				});
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_lookAlarmlist.replace('{userRealId}',
						this.userinfo.userRealId),
					dataType: "json",
					method: "GET",
					data: {
						page: 1,
						limit: 60,
						healthStatus: value.healid,
						equipmentRealId: value.eqid,
						startTime: this.$utils.getTime(new Date(value.time.replace(
								/-/g, '/'))
							.getTime() - 43200000, 0),
						endTime: this.$utils.getTime(new Date(value.time.replace(
								/-/g, '/'))
							.getTime() + 43200000, 0),
					},
					success: (res) => {
						if (res.statusCode !== 200) {
							this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
							return
						}
						if (res.data.code == 0) {
							this.count = res.data.count
							this.abnormalList = res.data.data
							if (this.count < this.pageSize) {
								this.loadStatus = "nomore";
							} else {
								this.loadStatus = 'loadmore';
							}
						} else {
							this.$utils.showToast(this, res.data.msg, 'error');
						}
					},
					fail() {
						this.$utils.showToast(this, "加载失败！", 'error');
					},
					complete() {
						uni.hideLoading();
					}
				})
			},
			//返回上一级
			onLeftClick() {
				uni.navigateBack({
					delta: 1
				});
			},
			//未处理,已处理
			dispose(value) {
				if (this.dealStatus !== value) {
					this.dealStatus = value;
					this.getAbnormalList();
				}
			},
			//处理报警
			disposeinfo(value) {
				this.disposeshow = true;
				this.disposeid = value.abnormalRealId;
				this.disposevalue = '';
				if (value.dealContent !== '' && value.dealContent !== null && value.dealContent !== undefined) {
					this.disposevalue = value.dealContent;
				}
			},
			//上传处理详情
			updispose() {
				this.disposeshow = false;
				let disposetext = new Object();
				disposetext.dealContent = this.disposevalue;
				uni.showLoading({
					title: '处理中...',
					mask: true,
				})
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_disposeAbnormal.replace(
						"{userRealId}", this.userinfo.userRealId).replace(
						"{abnormalRealId}", this.disposeid),
					data: JSON.stringify(disposetext),
					dataType: "json",
					method: "POST",
					success: (res) => {
						if (res.statusCode !== 200) {
							this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
							return
						}
						if (res.data.code == 0) {
							this.$utils.showToast(this, '处理成功！', 'success');
						} else {
							this.$utils.showToast(this, res.data.msg, 'error');
						}
					},
					fail: () => {
						this.$utils.showToast(this, '处理失败！', 'error');
					},
					complete: () => {
						uni.hideLoading();
						this.getAbnormalList();
					}
				})

			},
			//全部,一级,二级,三级
			tabsclick(item) {
				this.healthStatus = item.id;
				this.getAbnormalList()
			},
			//显示备注弹窗
			remark(value) {
				this.remarkvalue = ''
				if (value.comment !== '' && value.comment !== null && value.comment !== undefined) {
					this.remarkvalue = value.comment
				}
				this.remarkshow = true;
				this.remarkid = value.collectRecordRealId
				this.equipmentRealId = value.equipmentRealId
				this.pointRealId = value.pointRealId
			},
			//上传备注
			upremark() {
				this.remarkshow = false
				let remarkinfo = new Object();
				remarkinfo.collectRecordRealId = this.remarkid;
				remarkinfo.comment = this.remarkvalue;
				uni.showLoading({
					title: "添加中...",
					mask: true,
				});
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_addRemark.replace(
						"{userRealId}", this.userinfo.userRealId).replace(
						"{equipmentRealId}", this.equipmentRealId).replace(
						"{pointRealId}", this.pointRealId),
					data: JSON.stringify(remarkinfo),
					dataType: "json",
					method: "POST",
					success: (res) => {
						if (res.statusCode !== 200) {
							this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
							return
						}
						if (res.data.code == 0) {
							this.$utils.showToast(this, '添加成功！', 'success');
						} else {
							this.$utils.showToast(this, res.data.msg, 'error');
						}
					},
					fail: () => {
						this.$utils.showToast(this, '添加失败！', 'error');
					},
					complete: () => {
						uni.hideLoading();
						this.getAbnormalList();
					}
				})
			},
			//获取报警列表
			getAbnormalList() {
				uni.showLoading({
					title: "加载中...",
					mask: true,
				});
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_lookAlarmlist.replace('{userRealId}',
						this.userinfo.userRealId),
					dataType: "json",
					method: "GET",
					data: {
						page: this.pageIndex,
						limit: this.pageSize,
						healthStatus: this.healthStatus,
						dealStatus: this.dealStatus,
					},
					success: (res) => {
						if (res.statusCode !== 200) {
							this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
							return
						}
						if (res.data.code == 0) {
							this.count = res.data.count
							this.abnormalList = res.data.data
							if (this.count < this.pageSize) {
								this.loadStatus = "nomore";
							} else {
								this.loadStatus = 'loadmore';
							}
						} else {
							this.$utils.showToast(this, res.data.msg, 'error');
						}
					},
					fail() {
						this.$utils.showToast(this, "加载失败！", 'error');
					},
					complete() {
						uni.hideLoading();
					}
				})
			},
			//跳转到记录列表
			record(item) {
				let content = {
					pointRealId: item.pointRealId,
					equipmentRealId: item.equipmentRealId,
					name: item.equipmentName + '-' + item.pointName,
					id: item.collectRecordRealId,
					time: item.collectedTime,
					number: 1,
				}
				let data = JSON.stringify(content);
				uni.navigateTo({
					url: `/pages/equipment/recordList?content=${encodeURIComponent(data)}`
				})
			},
			//下滑加载
			scrolltolower() {
				if (this.count < this.pageSize) {
					this.loadStatus = "nomore";
				} else {
					setTimeout(() => {
						this.loadStatus = "loading";
						this.pageSize += 20;
						this.getAbnormalList();
					}, 1000);
				}
			},
		},
		//下拉刷新
		onPullDownRefresh() {
			this.pageSize = 20;
			this.getAbnormalList();
			uni.stopPullDownRefresh();
		}
	}
</script>

<style lang="scss" scoped>
	.headerdispose {
		width: 90%;
		margin: 3% auto 1%;
		height: 5%;
		display: flex;
	}

	.wei {
		display: flex;
		flex-grow: 1;
		justify-content: center;
		align-items: center;
		height: 100%;
		border-radius: 15rpx;
		border: 1px solid #b0b2b5;
		text-align: center;
		font-size: 15px;
	}

	.yi {
		background-color: #e9e9eb;
		display: flex;
		flex-grow: 1;
		justify-content: center;
		align-items: center;
		height: 100%;
		border-radius: 15rpx;
		border: 1px solid #b0b2b5;
		text-align: center;
		font-size: 15px;
	}

	.tabs {
		width: 95%;
		margin: auto
	}

	.abnormallist {
		width: 90%;
		margin: auto;
		height: 1240rpx;
		overflow: hidden;
	}

	.abnormalview {
		border: 1px solid #cdcdce;
		border-radius: 15rpx;
		margin: 3% 0%;
		padding: 3%
	}

	.zuo {
		display: inline-block;
		width: 70%;
		word-wrap: break-word;
	}

	.eqname {
		font-size: 16px;
		color: #262c36;
		font-weight: bold;
	}

	.time {
		font-size: 13px;
		color: #777777;
		margin: 3% 0%;
		font-weight: bold;
	}

	.feaname {
		font-size: 12px;
		color: #262c36;
		margin: 1% 0% 3% 0%;
		text-align: center;
		width: 100%;
	}

	.you {
		position: relative;
		padding: 1%;
		display: inline-block;
		width: 30%;
		word-wrap: break-word;
	}

	.tubiao {
		display: inline-block;
		margin-left: 10%;
	}

	.xia {
		border-top: 1px dashed #b0b2b5;
		display: flex;
		padding: 3% 0%;
	}

	.xia view {
		text-align: center;
		font-size: 13px;
	}

	.xiavi {
		display: inline-block;
		flex-grow: 1;
		width: 25%;
		padding: 0% 3%;
	}

	.xianame {
		padding: 0% 0% 15% 0%;
		border-bottom: 1px dashed #b0b2b5;
	}

	.xiavalue {
		padding: 15% 0% 0% 0%;
		word-wrap: break-word;
	}

	.xiaview {
		border-left: 1px dashed #b0b2b5;
	}

	.remark {
		padding: 40rpx;
		width: 600rpx;
	}

	.popuptitle {
		width: 100%;
		margin: 20rpx auto;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
	}

	.button {
		width: 90%;
		margin: 5% auto;
	}

	.yvjing {
		color: #ebbb53;
	}

	.baojing {
		color: #FC8452;
	}

	.gaobao {
		color: #EE6666;
	}
</style>